<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-11-15 15:03:30
 * @LastEditors: 朱江洲
 * @LastEditTime: 2021-12-09 09:14:58
-->
<template>
  <div id="echarts"></div>
</template>

<script>
export default {
  data() {
    return {
      dataTime: [
        "2020-01",
        "2020-02",
        "2020-03",
        "2020-04",
        "2020-05",
        "2020-06",
        "2020-07",
        "2020-08",
        "2020-09",
        "2020-10",
        "2020-11",
        "2020-12",
      ],
      dataPrice: [
        820, 932, 901, 934, 1290, 1330, 1320, 1800, 2000, 4300, 1678, 1786,
      ],
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      console.log(1);
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("echarts"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        title: {
          text: "支出趋势图",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.dataTime,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.dataPrice,
            type: "line",
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#1267fa", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#FFFFFF", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            itemStyle: {
              normal: {
                color: "#1267fa",
                // background: 'linear-gradient(0deg, rgba(18, 103, 250, 0.01) 0%, #1267FA 100%)'
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>